<template>
	<div class="detail_main_canvas" :class="!isAll?'active':''">
		<div class="detail_main_canvas_controlP1" v-if='mindMap'>
			诊断流程思维导图
		</div>
		<div class="detail_main_canvas_control" v-if='mindMap'>
			<div class="detail_main_canvas_controlP2 clearfix">
				<div class="detail_main_canvas_controlP3 hover_active" @click="showopen = true">
					<img src="@/images/detail_main_canvas_controlP311.png" class="normal" />
					<img src="@/images/detail_main_canvas_controlP312.png" class="active" />
				</div>
				<div class="detail_main_canvas_controlP3 hover_active" @click="changeScale(-1)">
					<img src="@/images/detail_main_canvas_controlP321.png" class="normal" />
					<img src="@/images/detail_main_canvas_controlP322.png" class="active" />
				</div>
				<div class="detail_main_canvas_controlP3 hover_active" @click="changeScale(1)">
					<img src="@/images/detail_main_canvas_controlP331.png" class="normal" />
					<img src="@/images/detail_main_canvas_controlP332.png" class="active" />
				</div>
				<div class="detail_main_canvas_controlP3 hover_active" @click="changeRotage">
					<img src="@/images/detail_main_canvas_controlP341.png" class="normal" />
					<img src="@/images/detail_main_canvas_controlP342.png" class="active" />
				</div>
				<div class="detail_main_canvas_controlP3 hover_active" @click="changeDrag" :class="dragState?'active':''">
					<img src="@/images/detail_main_canvas_controlP351.png" class="normal" />
					<img src="@/images/detail_main_canvas_controlP352.png" class="active" />
				</div>
			</div>
		</div>
		<div class="detail_main_canvas_area" ref='detail_main_canvas_area' @wheel.prevent="mouseWhell($event)" @mousemove.stop="mousemoveBox($event)" @mouseup.stop="mouseupBox($event)">
			<img :src="baseurl + mindMap" v-if='mindMap' ref='detail_canvas_img' class="detail_canvas_img" @load="loadover($event)" @mousedown.stop="mousedownBox($event)" id="thAreaAdd1" :style="getthAreaAdd1" />
			<div class="detail_main_canvas_empty" v-if='!mindMap' >该病例暂无思维导图文件</div>
		</div>
		<mindmapopen v-if='showopen' :mindMap='mindMap' @toexit='showopen = false'></mindmapopen>
	</div>
</template>

<script>
	import mindmapopen from '@/views/case/mindmapopen.vue'
	export default {
		components: {
			mindmapopen,
		},
		props: {
			isAll: String,
			mindMap: String,
		},
		data() {
			return {
				showopen: false,
				dragState: true,
				scalestep: 0.15,
				thAreaAdd1: {},
				selectArea: {
					x: 0,
					y: 0,
					scale: 1,
					rotate: 0
				},
			}
		},
		created() {

		},
		mounted() {

		},
		computed: {
			getthAreaAdd1() {
				return "left:" + this.selectArea.x + "px;top:" + this.selectArea.y + "px;transform:" + "scale(" + this.selectArea.scale + ") rotateZ(" + this.selectArea.rotate + "deg)"
			},
		},
		methods: {
			loadover(event) {
				this.$nextTick(() => {
					var width = this.$refs.detail_canvas_img.width;
					var Boxwidth = this.$refs.detail_main_canvas_area.offsetWidth;
					var height = this.$refs.detail_canvas_img.height;
					var Boxheight = this.$refs.detail_main_canvas_area.offsetHeight;
					this.selectArea.x = (Boxwidth - width) / 2
					this.selectArea.y = (Boxheight - height) / 2
				})
			},
			mouseWhell(event) {
				this.changeScale(event.deltaY)
			},
			changeScale(type) {
				if(type < 0) {
					this.selectArea.scale += this.scalestep
				} else {
					if(this.selectArea.scale <= 0.1) {
						return
					} else {
						this.selectArea.scale -= this.scalestep
					}
				}
			},
			changeRotage() {
				if(this.selectArea.rotate < 360) {
					this.selectArea.rotate += 90
				} else {
					this.selectArea.rotate = 90
				}
			},
			getArea() {
				var areaInfo = {
					imgLeft: $('#thAreaAdd1')[0].offsetLeft,
					imgTop: $('#thAreaAdd1')[0].offsetTop,
					originalWidth: $('#thAreaAdd1').width(),
					originalHeight: $('#thAreaAdd1').height(),
					pageX: '',
					pageY: '',
					moveable: false,
				}
				this.$set(this, 'thAreaAdd1', areaInfo)
			},
			mousedownBox(event) {
				if(!this.dragState) {
					return
				}
				this.getArea(name);
				this.thAreaAdd1.pageX = event.pageX;
				this.thAreaAdd1.pageY = event.pageY;
				this.thAreaAdd1.moveable = true;
			},
			mousemoveBox(event) {
				if(!this.dragState) {
					return
				}
				if(this.thAreaAdd1.moveable) {
					var left = this.thAreaAdd1.imgLeft + (event.pageX - this.thAreaAdd1.pageX);
					var top = this.thAreaAdd1.imgTop + (event.pageY - this.thAreaAdd1.pageY);
					this.selectArea.x = left;
					this.selectArea.y = top;
				}
			},
			mouseupBox(event, name) {
				this.thAreaAdd1.moveable = false;
			},
			changeDrag() {
				this.dragState = !this.dragState
			},
		},
	}
</script>